{% extends "base.html" %}

{% block head %}
<script type="text/javascript">
var cartographer;
var map;
var center = new GLatLng(39, -95);
var zoom = 4;
var data_list;
var options;
var prevValue;
var t;
var timer_is_on=false;

function load() {
	if( GBrowserIsCompatible() ) {
		map = new GMap2(document.getElementById("map"));
	    map.setCenter(new GLatLng(18, 0), 2);
		//map.setCenter(new GLatLng(39, 0), 4);
	    map.addControl(new GSmallZoomControl());
	    map.setMapType(G_PHYSICAL_MAP);
	    cartographer = Cartographer( map, { colorize:"#FFF", colorizeAlpha:.3 } );
		data_list = [
			{% for coords in locations%}
				[
				{% for ll, v in coords%}
					{ lat:{{ll.0}}, lng:{{ll.1}}, val:{{v}}, label:"{{searchedfor}}" },
				{% endfor %}
				],
			{% endfor %}
		];
		
		prevValue = data_list.length-1
		options = { color:"#AA00FF", enableGrid:false };
		if(data_list[prevValue].length > 0) {
			cartographer.cluster( data_list[prevValue], options );
		}
	    map.setCenter(center, zoom);
	}
}

function clearMarkers() {
    for(var i=0; i < map.Ma.length; i++){
        map.Ma[i].remove()
		map.Ma = []
    }
	//cg.Bubble.prototype.clearMarkers()
    //this.markers = new Array();
};

function changeSlider(newValue, isUser)
{
	if(isUser)
		stopTimer();		
	
	if(newValue==prevValue)
		return
	prevValue = newValue
	
	var text;
	if(newValue==data_list.length-1)
		text="Today"
	else if(newValue==data_list.length-2)
		text="Yesterday"
	else
		text = data_list.length - 1 - newValue + " days ago"
	document.getElementById("sliderVal").innerHTML=text;
	document.getElementById("slider").value=newValue;
	
	center = map.getCenter();
	zoom = map.getZoom();

	if( GBrowserIsCompatible() ) {
		mapdiv = document.getElementById("map")
		map = new GMap2(mapdiv);
	    map.setCenter(new GLatLng(18, 0), 2);
	    map.addControl(new GSmallZoomControl());
	    map.setMapType(G_PHYSICAL_MAP);
	    cartographer = Cartographer( map, { colorize:"#FFF", colorizeAlpha:.3 } );
		options = { color:"#AA00FF", enableGrid:false };
		// map = document.getElementById("map")
		//clearMarkers()
		
		values = data_list[newValue];
		// clusterer breaks for days with no data, so in that case just leave the map empty
		if(values.length > 0)
			cartographer.cluster( values, options );
	    map.setCenter(center, zoom);
	}

}

function timedCount()
{ 
	var changeTo = prevValue==0 ? data_list.length-1 : prevValue-1;
	changeSlider(changeTo, false);
	t=setTimeout("timedCount()",1000);
}

function playClicked() {
	if(timer_is_on)
	{
		stopTimer();		
	} else {
		timer_is_on=true;
		document.getElementById("play").value="Stop";
		timedCount();
	}
}

function _sanitize(text) {
	return str.replace(/#/g,'%23')
}

function stopTimer()
{
	clearTimeout(t);
	timer_is_on=0;	
	document.getElementById("play").value="Play";
}

function searchbut(f) {
	if(f.q.value == "") return false;
	window.location = "/topic/?q=" + encodeURIComponent(f.q.value)
}
 
function pressedkey(e) {
	var enterkey = 13
	
	if(e.which == enterkey)
		return false
	
	return true
}

function comparebut(f) {
	if(f.q.value == '') return false;
	window.location = "/topic/?q=" + encodeURIComponent("{{searchedfor}}") + ',' + encodeURIComponent(f.q.value)
}	
</script>
{% endblock %}

{% block content %}
<h2>Viewing data for: <strong>{{searchedfor}}</strong></h2>
{% if hasResults %}

{% else %}
No results were found for this search.
{% endif %}

<div id="map" style="margin:0 auto; width:675px;height:400px; border:1px solid #000; align:left"></div>

<div id='controls' align='left'>
{% if hasResults %}
<form>
<input type="button" id="play" value="Play" onClick="playClicked()">
<input id="slider" type="range" min="0" max="{{locations|length|add:"-1"}}" value="{{locations|length|add:"-1"}}" step="1" onchange="changeSlider(this.value, true)" />
<span id="sliderVal">Today</span>
</form>
{% endif %}

<form name="searchform" action="/topic/" method="get">
	<input type="text" name="q" onKeyPress = "return pressedkey(event)" />
	<input type="button" name = 'search' id = "search" value="Search" onClick="searchbut(this.form)" />
	<input type="button" name = 'compare' id= "compare" value="Compare"  onClick="comparebut(this.form)" />
</form>
</div>

<div id='results' align='left'>
{% if hasResults %}
<h2>Related Terms</h2>
{% for term in related %}
<a href='/topic/?q={{searchedfor}},{{term}}'>{{term}}</a> {% if not forloop.last %}, {% endif %}
{% endfor %}

<h2>Recent Tweets</h2>
<ul>
	{% for tweet in tweets %}
	<li><strong><a href="http://twitter.com/{{tweet.user}}">{{tweet.user}}</a></strong> says, &quot;{{tweet.text}}&quot;</li>
	{% endfor %}
</ul>
{% endif %}
</div>
{% endblock %}